<template>
  <div class="split-wrapper">
    <div>
      <h3>水平分割</h3>
      <Split v-model:div-value="divValue_h" mode="horizontal" left-min="170px" right-min="170px" class="h-split">
        <template v-slot:left>
          <div class="left"></div>
        </template>
        <template v-slot:right>
          <div class="right"></div>
        </template>
      </Split>
    </div>
    <div>
      <h3>垂直分割</h3>
      <Split v-model:div-value="divValue_v" mode="vertical" top-min="170px" bottom-min="170px" class="v-split">
        <template v-slot:top>
          <div class="top"></div>
        </template>
        <template v-slot:bottom>
          <div class="bottom"></div>
        </template>
      </Split>
    </div>
  </div>
</template>

<script>
export default {
  name: "SplitView"
}
</script>

<script setup>
import {ref} from 'vue'
import Split from '@/components/Split'
const divValue_h = ref(0.5)
const divValue_v = ref(0.5)
</script>

<style lang="sass" scoped>
.split-wrapper
  display: flex
  justify-content: space-around

  .v-split
    width: 300px
    height: 600px
    background-color: azure
    .top, .bottom
      width: 100%
      height: 100%
    .top
      background-color: #ffd04b
    .bottom
      background-color: #67c23a

  .h-split
    width: 600px
    height: 300px
    background-color: azure
    .left, .right
      width: 100%
      height: 100%
    .left
      background-color: #ffd04b
    .right
      background-color: #67c23a
</style>
